<script setup lang="ts">
import { ref } from 'vue'

// Active tab state
const activeTab = ref('getting-started')

// Set active tab function
const setActiveTab = (tab: string) => {
  activeTab.value = tab
}

// Documentation sections
const docSections = {
  'getting-started': {
    title: 'Getting Started',
    content: `
      <h2>Getting Started with PayFlow</h2>
      <p>Welcome to the PayFlow API documentation. This guide will help you get started with integrating our payment solutions into your application.</p>
      
      <h3>Account Setup</h3>
      <p>Before you begin, you'll need to:</p>
      <ol>
        <li>Create a PayFlow account</li>
        <li>Set up your business profile</li>
        <li>Generate API keys from the dashboard</li>
      </ol>
      
      <h3>API Keys</h3>
      <p>PayFlow uses API keys to authenticate requests. You'll need both a public key and a secret key:</p>
      <ul>
        <li><strong>Public Key:</strong> Used for client-side requests</li>
        <li><strong>Secret Key:</strong> Used for server-side requests (keep this secure!)</li>
      </ul>
      
      <div class="code-block">
        <pre><code>// Example API key structure
Public Key: pk_test_1a2b3c4d5e6f7g8h9i0j
Secret Key: sk_test_9i8h7g6f5e4d3c2b1a0</code></pre>
      </div>
      
      <h3>Making Your First API Request</h3>
      <p>Here's an example of how to make a basic API request to create a payment intent:</p>
      
      <div class="code-block">
        <pre><code>// Create a payment intent
fetch('https://api.payflow.example/v1/payment_intents', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer sk_test_9i8h7g6f5e4d3c2b1a0',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    amount: 2000, // Amount in cents
    currency: 'usd',
    payment_method_types: ['card']
  })
})
.then(response => response.json())
.then(data => console.log(data));</code></pre>
      </div>
    `
  },
  'api-reference': {
    title: 'API Reference',
    content: `
      <h2>API Reference</h2>
      <p>This section provides detailed information about all available API endpoints, their parameters, and response formats.</p>
      
      <h3>Base URL</h3>
      <p>All API requests should be made to:</p>
      <div class="code-block">
        <pre><code>https://api.payflow.example/v1/</code></pre>
      </div>
      
      <h3>Authentication</h3>
      <p>All API requests must include your API key in the Authorization header:</p>
      <div class="code-block">
        <pre><code>Authorization: Bearer YOUR_SECRET_KEY</code></pre>
      </div>
      
      <h3>Payment Intents</h3>
      <div class="endpoint">
        <h4>Create a Payment Intent</h4>
        <p><code>POST /payment_intents</code></p>
        <p>Creates a PaymentIntent object to track the payment lifecycle.</p>
        
        <h5>Parameters</h5>
        <table>
          <thead>
            <tr>
              <th>Parameter</th>
              <th>Type</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>amount</td>
              <td>integer</td>
              <td>Amount in the smallest currency unit (e.g., cents for USD)</td>
            </tr>
            <tr>
              <td>currency</td>
              <td>string</td>
              <td>Three-letter ISO currency code</td>
            </tr>
            <tr>
              <td>payment_method_types</td>
              <td>array</td>
              <td>List of payment method types to accept</td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="endpoint">
        <h4>Retrieve a Payment Intent</h4>
        <p><code>GET /payment_intents/:id</code></p>
        <p>Retrieves a PaymentIntent that has previously been created.</p>
      </div>
      
      <h3>Customers</h3>
      <div class="endpoint">
        <h4>Create a Customer</h4>
        <p><code>POST /customers</code></p>
        <p>Creates a new customer object.</p>
        
        <h5>Parameters</h5>
        <table>
          <thead>
            <tr>
              <th>Parameter</th>
              <th>Type</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>email</td>
              <td>string</td>
              <td>Customer's email address</td>
            </tr>
            <tr>
              <td>name</td>
              <td>string</td>
              <td>Customer's full name</td>
            </tr>
            <tr>
              <td>phone</td>
              <td>string</td>
              <td>Customer's phone number</td>
            </tr>
          </tbody>
        </table>
      </div>
    `
  },
  'sdk-libraries': {
    title: 'SDK Libraries',
    content: `
      <h2>SDK Libraries</h2>
      <p>PayFlow provides client libraries for multiple programming languages to make integration easier.</p>
      
      <h3>JavaScript SDK</h3>
      <p>Our JavaScript SDK allows you to securely collect payment information on the client-side.</p>
      
      <h4>Installation</h4>
      <div class="code-block">
        <pre><code>// Using npm
npm install @payflow/js

// Using yarn
yarn add @payflow/js

// Using CDN
&lt;script src="https://js.payflow.example/v1/payflow.js"&gt;&lt;/script&gt;</code></pre>
      </div>
      
      <h4>Basic Usage</h4>
      <div class="code-block">
        <pre><code>// Initialize PayFlow
const payflow = new PayFlow('pk_test_1a2b3c4d5e6f7g8h9i0j');

// Create a payment form
const form = payflow.createPaymentForm({
  container: '#payment-form',
  style: {
    base: {
      fontSize: '16px',
      color: '#32325d',
    }
  }
});

// Handle form submission
document.querySelector('#payment-form').addEventListener('submit', async (event) => {
  event.preventDefault();
  
  const { paymentMethod, error } = await payflow.createPaymentMethod({
    type: 'card',
    card: form,
    billing_details: {
      name: 'Jenny Rosen',
    }
  });
  
  if (error) {
    console.error(error);
  } else {
    // Send paymentMethod.id to your server
    console.log(paymentMethod);
  }
});</code></pre>
      </div>
      
      <h3>Server-Side Libraries</h3>
      <p>We provide official libraries for the following server-side languages:</p>
      
      <h4>Node.js</h4>
      <div class="code-block">
        <pre><code>// Installation
npm install @payflow/node

// Basic usage
const payflow = require('@payflow/node')('sk_test_9i8h7g6f5e4d3c2b1a0');

// Create a payment intent
const paymentIntent = await payflow.paymentIntents.create({
  amount: 2000,
  currency: 'usd',
  payment_method_types: ['card'],
});</code></pre>
      </div>
      
      <h4>Python</h4>
      <div class="code-block">
        <pre><code># Installation
pip install payflow

# Basic usage
import payflow
payflow.api_key = "sk_test_9i8h7g6f5e4d3c2b1a0"

# Create a payment intent
payment_intent = payflow.PaymentIntent.create(
  amount=2000,
  currency="usd",
  payment_method_types=["card"],
)</code></pre>
      </div>
    `
  },
  'webhooks': {
    title: 'Webhooks',
    content: `
      <h2>Webhooks</h2>
      <p>Webhooks allow your application to receive real-time notifications about events that happen in your PayFlow account.</p>
      
      <h3>Setting Up Webhooks</h3>
      <ol>
        <li>Go to the Developers section of your PayFlow dashboard</li>
        <li>Click on Webhooks</li>
        <li>Add a new endpoint URL</li>
        <li>Select the events you want to receive notifications for</li>
      </ol>
      
      <h3>Webhook Event Types</h3>
      <table>
        <thead>
          <tr>
            <th>Event</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>payment_intent.succeeded</td>
            <td>Occurs when a payment intent has been successfully completed</td>
          </tr>
          <tr>
            <td>payment_intent.payment_failed</td>
            <td>Occurs when a payment attempt fails</td>
          </tr>
          <tr>
            <td>payment_method.attached</td>
            <td>Occurs when a new payment method is attached to a customer</td>
          </tr>
          <tr>
            <td>invoice.payment_succeeded</td>
            <td>Occurs when an invoice is paid successfully</td>
          </tr>
          <tr>
            <td>customer.subscription.created</td>
            <td>Occurs when a customer is subscribed to a plan</td>
          </tr>
        </tbody>
      </table>
      
      <h3>Handling Webhook Events</h3>
      <p>Here's an example of how to handle webhook events on your server:</p>
      
      <div class="code-block">
        <pre><code>// Node.js example with Express
const express = require('express');
const app = express();
const payflow = require('@payflow/node')('sk_test_9i8h7g6f5e4d3c2b1a0');

app.post('/webhooks', express.raw({type: 'application/json'}), (req, res) => {
  const sig = req.headers['payflow-signature'];
  
  try {
    const event = payflow.webhooks.constructEvent(
      req.body,
      sig,
      'whsec_your_webhook_secret'
    );
    
    // Handle the event
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        console.log('PaymentIntent was successful:', paymentIntent.id);
        break;
      case 'payment_intent.payment_failed':
        const failedPaymentIntent = event.data.object;
        console.log('Payment failed:', failedPaymentIntent.id);
        break;
      default:
        console.log(\`Unhandled event type \${event.type}\`);
    }
    
    res.json({received: true});
  } catch (err) {
    res.status(400).send(\`Webhook Error: \${err.message}\`);
  }
});</code></pre>
      </div>
    `
  },
  'testing': {
    title: 'Testing',
    content: `
      <h2>Testing</h2>
      <p>PayFlow provides a testing environment to help you develop and test your integration before going live.</p>
      
      <h3>Test API Keys</h3>
      <p>You can use test API keys to make API calls without affecting production data or moving real money. Test keys start with <code>pk_test_</code> and <code>sk_test_</code>.</p>
      
      <h3>Test Cards</h3>
      <p>Use these card numbers to test different payment scenarios:</p>
      
      <table>
        <thead>
          <tr>
            <th>Card Number</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>4242 4242 4242 4242</td>
            <td>Successful payment</td>
          </tr>
          <tr>
            <td>4000 0025 0000 3155</td>
            <td>Requires 3D Secure authentication</td>
          </tr>
          <tr>
            <td>4000 0000 0000 9995</td>
            <td>Always fails with a decline code of insufficient_funds</td>
          </tr>
        </tbody>
      </table>
      
      <p>For these test cards, you can use:</p>
      <ul>
        <li>Any future expiration date</li>
        <li>Any 3-digit CVC</li>
        <li>Any value for other form fields</li>
      </ul>
      
      <h3>Testing Webhooks</h3>
      <p>You can use the PayFlow CLI to test webhooks locally:</p>
      
      <div class="code-block">
        <pre><code># Install the PayFlow CLI
npm install -g payflow-cli

# Forward webhooks to your local server
payflow listen --forward-to http://localhost:3000/webhooks</code></pre>
      </div>
      
      <h3>Testing Checklist</h3>
      <p>Before going live, make sure you test:</p>
      <ul>
        <li>Successful payments</li>
        <li>Failed payments and error handling</li>
        <li>3D Secure authentication flows</li>
        <li>Webhook processing</li>
        <li>Refund processing</li>
        <li>Subscription creation, updates, and cancellations</li>
      </ul>
    `
  }
}
</script>

<template>
  <div class="documentation-page">
    <!-- Documentation Hero -->
    <section class="docs-hero">
      <div class="container">
        <div class="docs-hero-content">
          <h1>PayFlow Documentation</h1>
          <p>Everything you need to know about integrating with our payment platform</p>
        </div>
      </div>
    </section>
    
    <!-- Documentation Content -->
    <section class="docs-content section">
      <div class="container">
        <div class="docs-layout">
          <!-- Sidebar Navigation -->
          <aside class="docs-sidebar">
            <nav class="docs-nav">
              <button 
                v-for="(section, key) in docSections" 
                :key="key"
                :class="['docs-nav-item', { active: activeTab === key }]"
                @click="setActiveTab(key)"
              >
                {{ section.title }}
              </button>
            </nav>
          </aside>
          
          <!-- Main Content -->
          <main class="docs-main">
            <div v-html="docSections[activeTab].content"></div>
          </main>
        </div>
      </div>
    </section>
    
    <!-- Documentation CTA -->
    <section class="docs-cta section">
      <div class="container">
        <div class="cta-content">
          <h2>Need Help?</h2>
          <p>Our support team is available to assist you with any questions or issues.</p>
          <div class="cta-buttons">
            <button class="btn btn-primary">Contact Support</button>
            <button class="btn btn-outline">Join Developer Community</button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
/* Documentation Hero */
.docs-hero {
  padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-8);
  background: linear-gradient(135deg, var(--primary-800), var(--primary-700));
  color: white;
  text-align: center;
}

.docs-hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
}

.docs-hero-content p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  color: var(--neutral-200);
}

/* Documentation Layout */
.docs-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Sidebar */
.docs-sidebar {
  width: 100%;
  position: sticky;
  top: var(--header-height);
}

.docs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.docs-nav-item {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius);
  background: none;
  border: 1px solid var(--neutral-200);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.docs-nav-item.active {
  background-color: var(--primary-50);
  border-color: var(--primary-200);
  color: var(--primary-700);
}

.docs-nav-item:hover:not(.active) {
  background-color: var(--neutral-100);
}

/* Main Content */
.docs-main {
  flex: 1;
  min-width: 0;
}

.docs-main h2 {
  font-size: 2rem;
  margin-bottom: var(--space-6);
  color: var(--primary-800);
}

.docs-main h3 {
  font-size: 1.5rem;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}

.docs-main h4 {
  font-size: 1.25rem;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}

.docs-main h5 {
  font-size: 1.1rem;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.docs-main p {
  margin-bottom: var(--space-4);
  line-height: 1.6;
  color: var(--text-secondary);
}

.docs-main ul,
.docs-main ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

.docs-main li {
  margin-bottom: var(--space-2);
}

.code-block {
  margin: var(--space-4) 0 var(--space-6);
  background-color: var(--neutral-800);
  border-radius: var(--border-radius);
  overflow-x: auto;
}

.code-block pre {
  padding: var(--space-4);
  margin: 0;
}

.code-block code {
  font-family: 'Fira Code', monospace;
  font-size: 0.9rem;
  color: var(--neutral-200);
  line-height: 1.5;
}

.endpoint {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--neutral-200);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0 var(--space-6);
}

table th,
table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--neutral-200);
}

table th {
  font-weight: 600;
  color: var(--text-primary);
  background-color: var(--neutral-50);
}

table td {
  color: var(--text-secondary);
}

/* CTA Section */
.docs-cta {
  background-color: var(--neutral-50);
}

.cta-content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.cta-content h2 {
  margin-bottom: var(--space-4);
  font-size: 2rem;
}

.cta-content p {
  margin-bottom: var(--space-6);
  color: var(--text-secondary);
}

.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}

/* Responsive */
@media (min-width: 768px) {
  .docs-nav {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .cta-buttons {
    flex-direction: row;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .docs-layout {
    flex-direction: row;
    gap: var(--space-10);
  }

  .docs-sidebar {
    width: 240px;
    flex-shrink: 0;
  }
  
  .docs-nav-item {
    width: 100%;
  }
}

/* Global styles that affect HTML content */
:deep(.code-block) {
  margin: var(--space-4) 0 var(--space-6);
  background-color: var(--neutral-800);
  border-radius: var(--border-radius);
  overflow-x: auto;
}

:deep(.code-block pre) {
  padding: var(--space-4);
  margin: 0;
}

:deep(.code-block code) {
  font-family: 'Fira Code', monospace;
  font-size: 0.9rem;
  color: var(--neutral-200);
  line-height: 1.5;
}

:deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0 var(--space-6);
}

:deep(table th),
:deep(table td) {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--neutral-200);
}

:deep(table th) {
  font-weight: 600;
  color: var(--text-primary);
  background-color: var(--neutral-50);
}

:deep(table td) {
  color: var(--text-secondary);
}

:deep(ul),
:deep(ol) {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

:deep(li) {
  margin-bottom: var(--space-2);
}
</style>